<template>
  <div class="group-wrapper" v-web-min-width>
    <el-carousel :interval="4000" type="card" height="400px" class="carousel-color">
      <el-carousel-item v-for="img in headImgs" :key="img">
        <div :class="{'head_one':img===1,'head_two':img===2,'head_three':img===3}" class="img-wrapper"></div>
      </el-carousel-item>
    </el-carousel>
    <div class="content-wrapper">
      <div class="row" v-for="threadGroups in HomePageThreadGroup">
        <div class="home-thread" v-for="threadGroup in threadGroups">
          <div class="img">
            <span class="icon">
              <span class="line"></span>
            </span>
          </div>
          <div class="content">
            <span class="title">{{ThreadGroupJson[threadGroup.name]}}</span>
            <span class="text">{{threadGroup.description}}</span>
            <a :href="'#/forum/thread/'+threadGroup.name" class="button">查看详情</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { ThreadGroupJson, HomePageThreadGroup } from '../../common/js/common'
  export default{
    data () {
      return {
        headImgs: [1, 2, 3],
        HomePageThreadGroup: HomePageThreadGroup,
        ThreadGroupJson: ThreadGroupJson
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/style/common.styl";
  @import "group.styl";
</style>
